<template>
  <div class="Centerbar">
    <dv-loading style="color: aqua" v-if="loading">{{ $t('loading') }}</dv-loading>
    <div ref="app" class="echarts" v-else></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getWorkshopFinishingRate } from "@/api/index";

export default {
  data() {
    return {
      xdata: [],
      datas: [],
      loading: false,
      screenWidth: document.body.clientWidth,
      screenHeight: document.body.clientHeight,
      myChart: "",
    };
  },
  methods: {
    getrequests() {
      getWorkshopFinishingRate().then((res) => {
        if (res.code == 200) {
          this.loading = false;
          this.datas = res.data;
          this.xdata = res.data.map((item) => {
            return item.workOrderCode;
          });
          this.$nextTick(() => {
            this.getdata();
          });
        }
      });
    },
    getdata() {
      var timer = null;
      let that = this;
      var myChart = echarts.init(this.$refs.app);
      this.myChart = myChart;
      var option;
      let dataX = this.xdata;
      let datas = this.datas;
      option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [this.$t('page3.rightCenterBox2.legend.assemblyDepartment'), this.$t('page3.rightCenterBox2.legend.precisionProcessingDepartment')],
          left: "right",
          width: 90,
          textStyle: {
            color: "white", // 设置图例文字颜色
            fontSize: 12, // 设置图例文字字体大小
          },
        },
        grid: {
          left: "2%",
          right: "12%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          name: this.$t('page3.rightCenterBox2.xAxis.workOrderCode'),
          type: "category",
          data: dataX,
          nameTextStyle: {
            color: "#a6cac9",
            fontSize: 10,
          },
          axisLabel: {
            rotate: 30, // 将标签旋转90度
            textStyle: {
              color: "#a6cac9",
              fontSize: 12,
            },
          },
        },
        yAxis: {
          name: this.$t('page3.rightCenterBox2.yAxis.percentage'),
          type: "value",
          max: 100, //最大值
          min: 0, //最小值
          interval: 20, //间隔
          axisTick: {
            show: false,
          },
          nameTextStyle: {
            color: "#a6cac9",
            fontSize: 10,
          },
          axisLabel: {
            textStyle: {
              color: "#a6cac9", // X轴字体颜色
              fontSize: 12, // X轴字体大小
            },
          },
        },
        series: [
          {
            name: this.$t('page3.rightCenterBox2.legend.assemblyDepartment'),
            type: "bar",
            color: "#38C986",
            data: datas.map((item, index) => {
              return {
                value: Math.round(
                  (item.workOrderCompleteNum / item.workOrderNum) * 100 || 0.0
                ),
                itemStyle: {
                  color:
                    item.workshopName == "精密加工部" ? "#009DFF" : "#38C986", // 根据条件设置颜色
                },
              };
            }),
            label: {
              show: true,
              position: "top",
              color: "#8E99E4",
              fontSize: 12,
              formatter: "{c}" + "%",
            },
            barWidth: "50%",
          },
          {
            name: this.$t('page3.rightCenterBox2.legend.precisionProcessingDepartment'),
            type: "bar",
            color: "#009DFF",
          },
        ],
        //自动滚动
        dataZoom: [
          {
            show: false,
            type: "slider",
            startValue: 0,
            endValue: 6,
          },
        ],
      };
      timer = setInterval(function () {
        if (option.dataZoom[0].endValue == dataX.length - 1) {
          option.dataZoom[0].endValue = 6;
          option.dataZoom[0].startValue = 0;
        } else {
          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
        }
        myChart.setOption(option, true);
      }, 6000);
      window.addEventListener("resize", () => {
        that.screenWidth = document.body.clientWidth;
        window.screenWidth = that.screenWidth;
        that.screenHeight = document.body.clientHeight;
        window.screenHeight = that.screenHeight;
      });
      option && myChart.setOption(option);
    },
  },
  mounted() {
    this.getrequests();
    setInterval(() => {
      this.getrequests();
    }, 3600000);
  },
  watch: {
    screenWidth() {
      this.myChart.resize();
    },
    screenHeight() {
      this.myChart.resize();
    },
    '$i18n.locale':{
    
    }
  },
};
</script>

<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 44vh;
}
</style>